<template>
  <div>
    <div class="section-lazyonload">
      <div class="template-section__wrap">
        <div class="template-search">
          <el-input v-model="scSearch" placeholder="请输入要搜索的素材" />
        </div>
        <el-scrollbar class="template-section" :style="{ height: tabHeight }">
          <div style="display: flex;justify-content: center;">
            <el-tabs v-model="activeName" @tab-click="tabHandleClick">
              <el-tab-pane label="推荐素材" name="first">
                <screcommend></screcommend>
              </el-tab-pane>
              <el-tab-pane label="我的收藏" name="second">
                <ul class="template-list">
                  我的收藏
                </ul>
              </el-tab-pane>
              <el-tab-pane label="我的购买" name="third">
                <ul class="template-list">
                  我的购买
                </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import screcommend from "./components/screcommend";
export default {
  components: { screcommend },
  props: ["tabHeight"],
  name: "moban",
  data() {
    return { activeName: "first", scSearch: "" };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    tabHandleClick() {
      console.log("tabHandleClick");
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../styles/leftPanel/index.less";

/deep/.el-tabs__content {
  overflow: visible;
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}

/deep/.el-input__inner {
  margin: 24px 24px 16px;
  width: 256px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 40px 0 16px;
  border: 1px solid transparent;
  position: relative;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  outline: none;
  text-align: center;
  background-color: #eaebf3;
}
</style>
